<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="11">
        <div class="chart-wrapper">
          <year-point v-if="!flag"/>
          <div v-if="flag" style="width:100%;height:300px"></div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="13">
        <div class="chart-wrapper">
          <mounth-point v-if="!flag"/>
          <div v-if="flag" style="width:100%;height:300px"></div>
        </div>
      </el-col>
    </el-row>
   
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper">
          <day-point v-if="!flag"/>
          <div v-if="flag" style="width:100%;height:300px"></div>
        </div>
      </el-col>
   
    </el-row>
  </div>
</template>

<script>
import DayPoint from "./components/DayPoint";
import YearPoint from "./components/YearPoint";
import MounthPoint from "./components/MounthPoint";
export default {
  name: "Datastation",
  components: {
    MounthPoint,
    YearPoint,
    DayPoint
  },
  data() {
    return {
      flag: false,
    };
  },
  created() {

  },
  methods: {

  }
};
</script>

<style lang="less" scoped>
.chart-wrapper {
 box-shadow:0px 0px 13px 0px rgba(102,102,102,0.13);
  margin: 5px 0;
}
</style>
